<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="bord">
    <div class="title">样式表</div>
    <div class="introduce">
        能实现内容与样式的分离，方便团队开发。<br/>
        　　　　　　　内容与样式和谐统一完整页面。
    </div>
</div>
<div class="bord">
    <div class="title">演示效果</div>
    <div class="introduce">
        <p>样式表的用法一：行内样式<br/>
            　　　　　　　　 通过属性 style = '样式的内容[由一组或多组样式内容，每一组以分号隔开]'<br/>
            　　　　　　　　 属性值 来指定样式的内容<br/>
            　　　　　　　　 样式名称：样式值
            <br/>
            <br/>
            代码示例：
            &lt;div style="border: 1px solid red;<br/>
            　　　　　　　　　　 background-color: antiquewhite;<br/>
            　　　　　　　　　　 font-family: '微软雅黑'"&gt;你好世界&lt;/div&gt;<br/>
            代码效果：
        <div style="border: 1px solid red;
                                    background-color: antiquewhite;
                                        font-family: '微软雅黑'">你好世界
        </div>
        　　　　　　　　
        </p>
        <br/>
        <p>样式表的用法二：内部样式<br/>
            　　　　　　　　 选择器 {一组或多组样式的内容}
            <br/>
            <br/>
            代码示例：
            &lt;style type="text/css"&gt;<br/>
            　　　　　　　　　　 pre {border: 1px solid red;<br/>
            　　　　　　　　　　 background-color: antiquewhite;<br/>
            　　　　　　　　　　 font-family: "微软雅黑"}<br/>
            　　　　　 &lt;/style&gt;<br/>
            　　　　　　　　　　 &lt;pre&gt;你好世界&lt;/pre&gt;<br/>
            <br/>
            代码效果：
            <style type="text/css">
                pre {border: 1px solid red;background-color: antiquewhite;font-family: "微软雅黑"}
            </style>
        <pre>你好世界</pre>

        </p>
        <br/>
        <br/>
        <p>样式表的用法三：外部样式<br/>
            <br/>
            代码示例：&lt;link rel="stylesheet" type="text/css" href="../CSS/my.css"&gt;<br/>
            　　　　　　　　　　  &lt;span&gt;你好世界&lt;/span&gt;<br/>
            　　　　　　　　　引用css中的my.css代码：span{<br/>
            　　　　　　　　　　 border: 1px solid red;<br/>
            　　　　　　　　　　 background-color: antiquewhite;<br/>
            　　　　　　　　　　 font-family: '微软雅黑';<br/>
            　　　　　　　　　　 }
            <br/>
            <br/>
            代码效果：<br/><link rel="stylesheet" type="text/css" href="../CSS/my.css"><br/>
            <span>你好世界</span>
        </p>
    </div>
</div>
</body>
</html>